import React, { useEffect, useState } from 'react';
import { Drawer, Button ,message,Switch,Form, Input, Select, Pagination ,Table, Popconfirm, Modal } from 'antd';
import {getDoubleList,serchDoubleList} from '@/services/index';
import './doubleDesk.less';
const { Option } = Select;

interface Double{
    visible:boolean,
    onclose:()=>void,
    summary:string,
    title:string,
    isCommentable:boolean,
    cover:string
}

interface DoubleList {
  id: string;
  originalname: string;
  filename: string;
  type: string;
  size: number;
  url: string;
  createAt: string;
}

const doubleDesk: React.FC<Double> = ({visible,onclose,summary,title,isCommentable,cover}) => {
    // const [visible, setVisible] = useState(false);                   // 第一层开关
    const [childrenDrawer, setChildrenDrawer] = useState(false);     // 第二层开关
    const [list,setList] = useState<DoubleList[]>([]);
    const [form] = Form.useForm();

    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    // 搜索
    const onFinish = (values: any) => {
        serchDoubleList({page: 1,pageSize: 12,...values}).then(res=>{
            setList(res.data[0]);
        })
    };
    // 重置
    const onReset = () => {
        form.resetFields();
    };

    // console.log(visible,summary,title,isCommentable,cover)
    // 关闭第一层
    const onClose = () => {
        onclose()
    };
    // 开启第二层
    const showChildrenDrawer = () => {
        getDoubleList().then(res=>{
            setList(res.data[0])
        })
        
        setChildrenDrawer(true)
    };
    // 关闭第二层
    const onChildrenDrawerClose = () => {
        setChildrenDrawer(false)
    };
    // 开关
    function onChangeStatus(checked:boolean) {
        console.log(`switch to ${checked}`);
    }

    const onShowSizeChange=(current:number)=>{
        console.log('111',current)
        serchDoubleList({page: current,pageSize: 12}).then(res=>{
            setList(res.data[0]);
        })
    }

    return <div className='doubleDesk'>
        <Drawer
            title="更新知识库"
            width={520}
            closable={false}
            onClose={onClose}
            visible={visible}
            footer={
                <div
                  style={{
                    textAlign: 'right',
                  }}
                >
                  <Button onClick={onClose} style={{ marginRight: 8 }}>
                    取消
                  </Button>
                  <Button onClick={()=>{message.warning('访客无权进行该操作')}} type="primary">
                    更新
                  </Button>
                </div>
              }
        >
            <div className='doubleTxt'>
              <div>
                  名称：<input type="text" defaultValue={title} style={{width:'90%',height:'30px',border:'solid 1px #bbb',outline:'none',paddingLeft:'10px',margin:'20px 0'}} />
              </div>
              <div>
                  描述：<input type="text" defaultValue={summary} style={{width:'90%',height:'50px',border:'solid 1px #bbb',outline:'none',paddingLeft:'10px'}} />
              </div>
              <div>
                  评论：<Switch defaultChecked onChange={onChangeStatus} style={{margin:'20px 0'}} />
              </div>
              <div>
                  封面：<img src={cover} alt="" style={{width:'90%',height:'120px'}} />
                  <input type="text" defaultValue={cover} style={{width:'90%',height:'30px',border:'solid 1px #bbb',outline:'none',paddingLeft:'10px',margin:'20px 0',marginLeft:'36px'}} />
                  <span onClick={showChildrenDrawer} style={{display:"inline-block",padding:'5px',border:'solid 1px #bbb',margin:'0 10px 0 36px',cursor:'pointer'}}>选择文件</span>
                  <span style={{display:"inline-block",padding:'5px',border:'solid 1px red',cursor:'pointer'}}>移 除</span>
              </div>
            </div>
            <Drawer
                title="文件选择"
                width={780}
                closable={false}
                onClose={onChildrenDrawerClose}
                visible={childrenDrawer}
            >
                <div className='douAll'>
                    <div className="douAll_head" style={{width: '95%',margin:' 25px auto'}}>
                    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} style={{display: 'flex',flexWrap: 'wrap'}}>
                        <Form.Item name="originalname" label="名称" style={{ width: '200px',textAlign: "left"}}>
                            <Input placeholder="请输入知识库名称" />
                        </Form.Item>
                        <Form.Item name="type" label="状态" style={{ width: '200px', textAlign: "left" }}>
                            <Input placeholder="请输入文件类型" />
                        </Form.Item>
                        <Form.Item {...tailLayout} style={{width: '97%',textAlign: 'right'}}>
                            <Button type="primary" htmlType="submit" style={{marginRight:'15px'}}>
                                搜索
                            </Button>
                            <Button htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                    </div>
                    <div className="douAll_main" style={{width:'100%',display:'flex',justifyContent:'space-around',flexWrap:'wrap'}}>
                        {
                            list && list.map((item,index)=>{
                                return <div key={item.id} style={{width: '24%'}}>
                                    <img src={item.url} alt="" style={{width:'100%',height:'120px'}} />
                                    <p style={{width:'100%',height:'50px',border:"solid 1px #ccc",textAlign:'center',lineHeight:'50px',textOverflow:'ellipsis',whiteSpace:'nowrap',overflow:'hidden'}}>{item.originalname}</p>
                                </div>
                            })
                        }
                        <Pagination
                            total={85}
                            showSizeChanger
                            showTotal={total => `共${total}条`}
                            onChange={onShowSizeChange}
                            style={{width:'100%',textAlign:'center'}}
                        />
                    </div>
                </div>
                
            </Drawer>
        </Drawer>
    </div>
}

export default doubleDesk;